<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/select.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">电影</h1>
		</header>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div style="width: 100%;">
				<ul class="select">
					<li class="select-list">
						<dl id="select1">
							<dd class="select-all selected">
								<a href="#">全部</a>
							</dd>
						</dl>
					</li>
					<li class="select-list">
						<dl id="select2">
							<dd class="select-all selected">
								<a href="#">全部</a>
							</dd>
						</dl>
					</li>
					<li class="select-list">
						<dl id="select3">
							<dd class="select-all selected">
								<a href="#">全部</a>
							</dd>
						</dl>
					</li>
					<li class="select-result">
						<dl>
							<dt>已选条件：</dt>
							<dd class="select-no">暂时没有选择过滤条件</dd>
						</dl>
					</li>
				</ul>
			</div>
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-grid-view mui-grid-9">
				</ul>
			</div>
		</div>
	</body>
	<script src="../js/common.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="../js/call-native-page-plugin.js" charset="UTF-8"></script>
	<script src="../js/channel/movie.js"></script>
	<script>
		mui.init({
			swipeBack: true, //启用右滑关闭功能
			pullRefresh: {
				container: '#pullrefresh',
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});

		var count = 0;

		var vodList;

		var isFirst = true;

		var isListAll = false;
		/**
		 * 上拉加载具体业务实现
		 */
		function pullupRefresh() {
			setTimeout(function() {
				if(isFirst) {
					var url = base_url + 'client/vod/list/1/all/all/all';
					mui.ajax(url, {
						async: false,
						dataType: 'json',
						type: 'get',
						timeout: 20000,
						success: function(data) {
							vodList = data.videoList;
						},
						error: function(error) {
							alert("无数据！");
						}
					});
					isFirst = false;
				}
				mui('#pullrefresh').pullRefresh().endPullupToRefresh((isListAll)); //参数为true代表没有更多数据了。
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');

				var i = cells.length;
				var len = i + 6;

				if(!isListAll && vodList !== '') {
					if(i < vodList.length && len >= vodList.length) {
						len = vodList.length;
						isListAll = true;
					}
					for(; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4';
						li.style.padding = '1px 1px';
						li.innerHTML = '<a id="' + vodList[i].mediaId + '" href="#"><img src="' + base_img_url + vodList[i].img + '" width="100%" /><div class="mui-media-body">' + vodList[i].title + '</div></a>'
						table.appendChild(li);
						openPage(vodList[i].mediaId);
					}
				}
			}, 1500);
		}
		if(mui.os.plus) {
			mui.plusReady(function() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				}, 1000);
				getData();
			});
		} else {
			mui.ready(function() {
				mui('#pullrefresh').pullRefresh().pullupLoading();
			});
		}

		function getData() {
			var url = base_url + 'client/vod/category/1';
			mui.ajax(url, {
				dataType: 'json',
				type: 'get',
				timeout: 10000,
				success: function(data) {
					initSelect(data);
					generator();
				},
				error: function(error) {
					alert("无数据！");
				}
			});
		}

		function initSelect(data) {
			var select1 = document.getElementById('select1');
			var areas = data.areas.split(',');
			for(var i = 0; i < areas.length; i++) {
				var dd = document.createElement('dd');
				dd.innerHTML = '<a href="#">' + areas[i] + '</a>';
				select1.appendChild(dd);
			}

			var select2 = document.getElementById('select2');
			var years = data.years.split(',');
			for(var i = 0; i < years.length; i++) {
				var dd = document.createElement('dd');
				dd.innerHTML = '<a href="#">' + years[i] + '</a>';
				select2.appendChild(dd);
			}

			var select3 = document.getElementById('select3');
			var types = data.types.split(',');
			for(var i = 0; i < types.length; i++) {
				var dd = document.createElement('dd');
				dd.innerHTML = '<a href="#">' + types[i] + '</a>';
				select3.appendChild(dd);
			}
		}

		// 打开播放页面
		function openPage(id) {
			var a = document.getElementById(id);
			a.addEventListener('tap', function() {
				plus.plugintest.openVodPage(id);
			})
		}
	</script>

</html>